/*
 * @Author: zf
 * @Last Modified by: zf
 * Description:
    1.按钮展示组件
    2.slot: headerLeft =>表格顶部左侧信息;controlsBtn => 为表格列表操作列插槽
    3.btnConfigs: 按钮动态配置
 */
<template>
  <div class="btnBox">
    <div class="slotContent">
      <slot name="headerLeft" />
    </div>
    <div>
      <t-button :btn-config="btnConfigs" @propClick="(fn)=>handleClick(fn,store.getters.checkTableData)" />
    </div>
  </div>
</template>

<script>
import { msgInfoEl } from '@/utils'
import store from '@/store'
import TButton from '@/components/basic/TButton.vue'

export default {
    name: 'BtnConfig',
    components: {
        TButton
    },
    props: {
        btnConfigs: {
            type: Array,
            require: true,
            deep: true,
            default: () => []
        }
    },
    data() {
        return {
            eventName: 'click', // 点击按钮绑定的方法，这样写法也可以去绑定一些其他的比如change等方法
            // 按钮配置 0 => 不需要勾选，1 => 支持单选，2 => 支持多选
            btnConfig: {
                inquire: 0, // 查询
                add: 0, // 新增
                edit: 1, // 编辑
                delete: 2, // 删除
                visa: 1, // 验签
                void: 1, // 作废
                derive: 0, // 导出
                conDesc: 0, // 规则配置说明
                assign: 1, // 指派签署人
                upload: 0, // 上传
                download: 2, // 下载
                renewal: 1, // 替换
                confirmSign: 0, // 确认签署
                archivist: 0, // 归档
                stamp: 1 // 盖章
            }
        }
    },
    computed: {
        store() {
            return store
        }
    },
    methods: {
        // 动态绑定操作按钮的点击事件(按钮是父组件传递过来循环出来的,所以我们给按钮定义一个方法)
        // 接收两个参数，一个是fun(string类型)，一个是row（array类型，也就是我们选中行的数据）
        // 这里的某个按钮时传递的参数
        // 比如我点击的是编辑，那这时的fun就是 'edit',执行的方法就是下边的this.edit（row）
        // add => 新增，edit => 编辑，delete => 删除，assign => 指派签署人,upload => 上传，download => 下载
        handleClick(fun, row) {
            const type = this.btnConfig[fun]
            if (type === 1) {
                this.singleChoice(fun, row)
                return
            }
            if (type === 2) {
                this.multipleChoice(fun, row)
                return
            }
            this.uncheck(fun, row)
        },
        // 单条数据选择
        singleChoice(fun, row) {
            if (!row.length) {
                msgInfoEl({
                    type: 'info',
                    message: '请勾选数据后操作'
                })
                return false
            }
            if (row.length > 1) {
                msgInfoEl({
                    type: 'info',
                    message: '当前仅支持单条数据操作'
                })
                return false
            }
            this.$emit('propClick', fun, row)
        },
        // 多条数据选择
        multipleChoice(fun, row) {
            if (!row.length) {
                msgInfoEl({
                    type: 'info',
                    message: '请勾选数据后操作'
                })
                return false
            }
            this.$emit('propClick', fun, row)
        },
        // 不用选择数据
        uncheck(fun, row) {
            this.$emit('propClick', fun, row)
        }
    }
}
</script>

<style lang="scss" scoped>
.btnBox {
    display: flex;
    justify-content: space-between;
    .slotContent {
        flex: 1;
    }
    .btnBox-btn {
        // margin: 15px 0 15px;
    }
}
::v-deep .pms-button-primary {
    color: #fff;
}
</style>
